<template>
  <div style="border: 1px solid #ccc">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
    <Editor style="height: 500px; overflow-y: hidden;" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode"
      @onCreated="handleCreated" @onChange="onChange" />
  </div>
</template>
<script lang="ts">
import '@wangeditor/editor/dist/css/style.css' // 引入 css

import { onBeforeUnmount, ref, shallowRef, onMounted, watchEffect } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { DomEditor, Boot } from '@wangeditor/editor'
import { ElMessage } from 'element-plus'
import attachmentModule from '@wangeditor/plugin-upload-attachment'
// 注册。要在创建编辑器之前注册，且只能注册一次，不可重复注册。
Boot.registerModule(attachmentModule)

export default {
  components: { Editor, Toolbar },
  setup() {
    // 编辑器实例，必须用 shallowRef
    const editorRef = shallowRef()


    // 内容 HTML
    const valueHtml = ref('<center><table border="1"><tr><th>Month</th><th>Savings</th></tr><tr><td>January</td><td>$100</td></tr></table></center>')

    // 模拟 ajax 异步获取内容
    onMounted(() => {
      setTimeout(() => {
        // valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
      }, 1500)
    })

    const toolbarConfig = {
    }
    toolbarConfig.excludeKeys = [
      "bgColor",
      "fontSize",
      "fontFamily",
      "lineHeight",
      'group-more-style', // 排除菜单组，写菜单组 key 的值即可
      'group-video',
      "emotion"
    ]
    toolbarConfig.insertKeys = {
      index: 0, // 自定义插入的位置
      keys: ['uploadAttachment'], // “上传附件”菜单
    }
    const editorConfig = {
      // 在编辑器中，点击选中“附件”节点时，要弹出的菜单
      hoverbarKeys: {
        attachment: {
          menuKeys: ['downloadAttachment'], // “下载附件”菜单
        },
      },
      placeholder: '请输入内容...',
      EXTEND_CONF: {
        mentionConfig: {
        },
      },
      // autoFocus: false,
      // 所有的菜单配置，都要在 MENU_CONF 属性下
      MENU_CONF: {
        // “上传附件”菜单的配置
        uploadAttachment: {
          server: '/api/upload', // 服务端地址
          timeout: 5 * 1000, // 5s

          fieldName: 'custom-fileName',
          meta: { token: 'xxx', a: 100 }, // 请求时附加的数据
          metaWithUrl: true, // meta 拼接到 url 上
          headers: { Accept: 'text/x-json' },

          maxFileSize: 10 * 1024 * 1024, // 10M

          onBeforeUpload(file) {
            console.log('onBeforeUpload', file)
            return file // 上传 file 文件
            // return false // 会阻止上传
          },
          onProgress(progress) {
            console.log('onProgress', progress)
          },
          onSuccess(file, res) {
            console.log('onSuccess', file, res)
          },
          onFailed(file, res) {
            alert(res.message)
            console.log('onFailed', file, res)
          },
          onError(file, err, res) {
            alert(err.message)
            console.error('onError', file, err, res)
          },

          // // 上传成功后，用户自定义插入文件
          // customInsert(res: any, file: File, insertFn: Function) {
          //   console.log('customInsert', res)
          //   const { url } = res.data || {}
          //   if (!url) throw new Error(`url is empty`)

          //   // 插入附件到编辑器
          //   insertFn(`customInsert-${file.name}`, url)
          // },

          // 用户自定义上传
          customUpload(file, insertFn) {
            console.log('customUpload', file)

            return new Promise(resolve => {
              // 插入一个文件，模拟异步
              setTimeout(() => {
                const src = `https://www.w3school.com.cn/i/movie.ogg`
                insertFn(`customUpload-${file.name}`, src)
                resolve('ok')
              }, 500)
            })
          },

          // // 自定义选择
          // customBrowseAndUpload(insertFn: Function) {
          //   alert('自定义选择文件，如弹出图床')
          //   // 自己上传文件
          //   // 上传之后用 insertFn(fileName, link) 插入到编辑器
          // },

          // 插入到编辑器后的回调
          onInsertedAttachment(elem) {
            console.log('inserted attachment', elem)
          },
        },
        // 图片上传
        uploadImage: {
          server: '/api/blade-resource/fileSystem/fileUpload',
          fieldName: 'file',
          // 单个文件的最大体积限制，默认为 2M
          maxFileSize: 10 * 1024 * 1024, // 10M
          // 最多可上传几个文件，默认为 100
          maxNumberOfFiles: 10,
          // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
          allowedFileTypes: ['image/*'],
          // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
          meta: {
            // token: 'xxx',
            // otherKey: 'yyy'
            // file:''
          },
          // 将 meta 拼接到 url 参数中，默认 false
          metaWithUrl: false,

          // 自定义增加 http  header
          headers: {
            // Accept: 'text/x-json',
            // otherKey: 'xxx'
          },

          // 跨域是否传递 cookie ，默认为 false
          withCredentials: true,

          // 超时时间，默认为 10 秒
          timeout: 10 * 1000, //10 秒

          // 上传前
          onBeforeUpload(files) {
            ElMessage({
              message: '图片正在上传中,请耐心等待',
              duration: 0,
              customClass: 'uploadTip',
              iconClass: 'el-icon-loading',
              showClose: true
            });
            return files;
          },
          // // 用户自定义上传图片
          customUpload(file, insertFn) {
            console.log('customUpload', file)

            return new Promise((resolve) => {
              // 插入一张图片，模拟异步
              setTimeout(() => {
                const src = `https://www.baidu.com/img/flexible/logo/pc/result@2.png?r=${Math.random()}`
                insertFn(src, '百度 logo', src)
                resolve('ok')
              }, 500)
            })
          },

          // 单个文件上传成功之后
          onSuccess(file, res) {
            console.log(`${file.name} 上传成功`, res);
          },

          // 单个文件上传失败
          onFailed(file, res) {
            console.log(`${file.name} 上传失败`, res);
          },
          // 上传进度的回调函数
          onProgress(progress) {
            // progress 是 0-100 的数字
            console.log('progress', progress);
          },

          // 上传错误，或者触发 timeout 超时
          onError(file, err, res) {
            console.log(`${file.name} 上传出错`, err, res);
          }
        },
      },
    }
    // 组件销毁时，也及时销毁编辑器
    onBeforeUnmount(() => {
      console.log(11111111);
      const editor = editorRef.value
      if (editor == null) return
      editor.destroy()
    })

    const handleCreated = (editor) => {
      editorRef.value = editor // 记录 editor 实例，重要！
      // 查看所有工具栏key
      console.log(editor.getAllMenuKeys())
    }

    const onChange = (editor) => {
      const toolbar = DomEditor.getToolbar(editor)
      // console.log("工具栏配置", toolbar.getConfig().toolbarKeys); // 工具栏配置
    }
    watchEffect(() => {
      console.log(valueHtml.value);
    })

    return {
      editorRef,
      valueHtml,
      mode: 'default', // 或 'simple'
      toolbarConfig,
      editorConfig,
      handleCreated,
      onChange
    };
  }
}
</script> 